<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初识Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 想让vue工作，就必须创建一个Vue实例，且传入一个配置对象 -->
    <!-- 容器里的代码被称为【vue模板】 -->
    <!-- 容器和实例之间的关系是一对一 -->
    <!-- 
      真实开发中只有一个Vue实例，并且会配合着组件一起使用
      {{xxx}}中的xxx要写js表达式 表达式就是返回一个值
     -->
    <div id="vue_det">
      <h1>site : {{site}}</h1>
      <h1>url : {{url}}</h1>
      <h1>{{details()}}</h1>
      <!-- {{ }} 用于输出对象属性和函数返回值 -->
    </div>

    <div id="root"></div>
    <script>
      // 在vue2中创建vue实例 语法是
      //   var vm = new Vue({
      //     // 选项
      //   });
      //   选项里可以填写 挂载对象、数据、方法
      var vm = new Vue({
        el: "#vue_det",
        data: {
          site: "菜鸟教程",
          url: "www.runoob.com",
          alexa: "10000",
        }, //data 用于定义属性
        methods: {
          details: function () {
            return this.site + " - 学的不仅是技术，更是梦想！"; //methods 用于定义的函数，可以通过 return 来返回函数值
          },
        },
      });
      //vue中提供的实例属性与方法，具有前缀$，以便与用户定义的属性区分开来
      document.write(vm.$data === data); //true
      document.write("<br>");
      document.write(vm.$el === document.getElementById("vue_det")); //true

      //在vue3中创建的方式有所不同

      Vue.createApp({
        data() {
          return { content: 1 };
        },
        mounted() {
          setInterval(() => {
            this.content += 1;
          }, 1000);
        },
        template: "<div>{{content}}</div>",
      }).mount("#root");
    </script>
  </body>
</html>
